<template lang="pug">
.list
  .area-header
    .area-search
      el-select(placeholder="选择反馈者身份" prefix-icon="el-icon-search" clearable v-model="userType" @change="changeUserType")
        el-option(v-for="(item, index) in userTypeList" :key="index" :label="item.label" :value="item.value")
      el-date-picker(
        placeholder="选择时间"
        type="daterange"
        v-model="time"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="changeTime"
        clearable
      )
  .area-list-table
    el-table(
      height="100%"
      :data="list"
      :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
      border
      style="width: 100%"
      v-loading="loading"
      empty-text="未找到符合条件的内容"
    )
      el-table-column(type="index" width="55" align="center" label="序号")
      el-table-column(label="反馈内容" :show-overflow-tooltip="true")
        template(slot-scope="scope")
          .table-item-bd {{ scope.row.feedbackContext }}
      el-table-column(label="反馈图片")
        template(slot-scope="scope")
          .table-item-bd
            label(@click.stop="preview(scope.row)") 预览
      el-table-column(label="反馈者" prop="nickName")
      el-table-column(label="反馈者身份" prop="userTypeStr")
      el-table-column(label="创建时间")
        template(slot-scope="scope") {{ new Date(scope.row.feedbackTime).format('yyyy-MM-dd hh:mm:ss') }}
  .table-pagination
    el-pagination(
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :current-page="page"
      :page-size="pageSize"
      @current-change="currentChange"
    )
  //- 预览详情
  el-dialog(
    :visible.sync="show"
    width="1024px"
    :before-close="handleClose"
    custom-class="dialog-border"
    :close-on-click-modal="false"
  )
    .modal-title(slot="title") 反馈详情
    .modal-content
      el-row
        el-col(:span="8" class="content-rise") 反馈者：{{ detail.nickName }}
        el-col(:span="8" class="content-rise") 角色：{{ detail.userTypeStr }}
        el-col(:span="8" class="content-rise") 提交时间：{{ new Date(detail.feedbackTime).format('yyyy-MM-dd hh:mm:ss') }}
      el-row
        el-col(:span="24" class="content-topic") 反馈内容
      el-row
        el-input(
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 10}"
          placeholder="请输入内容"
          v-model="detail.feedbackContext"
          readonly
        )
      el-row
        el-col(:span="24" class="content-topic") 反馈图片
      el-row(class="material-image-bd")
        .material-image-item(class="cursor" v-for="(item, index) in detail.fileList || []" :key="index")
          img(:src="item.fileUrl" style="width:160px; height:160px" @click.stop="carouselImg(index)")
      el-row(class="content-confirm")
        el-button(@click="detailConfirm" type="primary" size="small") 确定
</template>

<script>
import { getSuggestionList, getSuggestionDetail } from 'api'
import { mapActions } from 'vuex'
export default {
  name: 'suggestionManage',
  data () {
    return {
      detail: {},
      show: false,
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      list: [],
      userType: '',
      time: [],
      userTypeList: [
        {
          label: '全部人员',
          value: 0
        },
        {
          label: '设计师',
          value: 1
        },
        {
          label: '供应商',
          value: 2
        }
      ]
    }
  },
  methods: {
    ...mapActions([
      'changeCarousel'
    ]),
    currentChange (page) {
      this.page = page
      this.getList()
    },
    changeUserType () {
      this.page = 1
      this.getList()
    },
    changeTime () {
      this.page = 1
      this.getList()
    },
    async getSuggestionDetail (row) {
      try {
        let query = {
          id: row.id
        }
        const { ResultSet } = await this.$axios.post(getSuggestionDetail, { ...query })
        this.detail = ResultSet.userData.detail || {}
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getList () {
      try {
        this.loading = true
        let query = {}
        query.currentPage = this.page
        query.pageSize = this.pageSize
        if (this.userType) query.userType = this.userType
        if (this.time && this.time.length) {
          query.startTime = new Date(this.time[0]).getTime()
          query.endTime = new Date(this.time[1]).getTime()
        }
        const { ResultSet } = await this.$axios.post(getSuggestionList, { ...query })
        this.total = ResultSet.userData.total || 0
        this.list = ResultSet.userData.data || []
        this.loading = false
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    init () {
      this.getList()
    },
    preview (row) {
      this.show = true
      this.detail = {}
      this.getSuggestionDetail(row)
    },
    handleClose () {
      this.show = false
      this.currentChange()
    },
    detailConfirm () {
      this.show = false
      this.currentChange()
    },
    carouselImg (index) {
      this.changeCarousel({ list: this.detail.fileList, show: true, defaultIndex: index })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.init()
    })
  }
} 
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid #F3F3F4;
  box-sizing: border-box;
  box-shadow: 0px 4px 0px #F3F3F4;
  border-radius: 10px;
  padding: 0 40px;
}
.area-header {
  width:100%;
  height:40px;
  margin-top:16px;
  margin-bottom:16px;
  .area-search {
    display: flex;
    align-items: center;
    .el-input {
      width: 202px;
      margin-right: 16px;
    }
    .el-date-editor {
      margin-right: 16px;
    }
    .el-select {
      margin-right: 16px;
    }
    icon-search{
      cursor: pointer;
    }
  }
}
.area-list-table {
  height: calc(100% - 150px);
}
.table-pagination {
  padding: 24px 0;
  text-align: right;
}

.table-item-bd {
  color: #FF2E42;
  label {
    cursor: pointer;
  }
}
.modal-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.modal-content {
  .el-row {
    margin-bottom: 10px;
  }
  .content-rise {
    font-size: 14px;
    line-height: 24px;
    color: #AFAFAF;
  }
  .content-topic {
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
    color: #3E4373;
  }
  .material-image-bd {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .material-image-item {
      margin-right: 36px;
      margin-bottom: 36px;
      &.cursor {
        cursor: pointer;
      }
    }
  }
  .content-confirm {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
